<template>
    <div class="raise">
        <app-header>
            <template v-slot:header-tit>
                养鹅
            </template>
        </app-header>
        <!--导航栏  -->
        <nav>
            <div class="nav-box">
                <router-link to="/home/raise/raise-task" active-class="active" ><span>任务</span> </router-link>
                <!-- <router-link to="/home/raise/raise-raising" active-class="active" exact><span>养鹅</span> </router-link> -->
                <router-link to="/home/raise/raise-market" active-class="active" ><span>市场</span> </router-link>
                <router-link to="/home/raise/raise-wallet" active-class="active" ><span>钱包</span> </router-link>
            </div>
        </nav>
        <section class="contain-box">
            <router-view/>
        </section>   
    </div>
</template>
<script>
import appHeader from "../components/app-header.vue"
export default {
    name:'Raise',
    components:{
        appHeader
    }

}
</script>
<style lang="scss" scoped>
$bodyCol:rgb(241,240,245);
$navCol:rgb(246,246,246);
$maxWidth:645px;
.card-header{
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    align-items: center;
    .icon{
        width: 17px;
        height: 17px;
        vertical-align: middle;
        path{
            fill:#333
        }
    }
    .tit{
        flex-grow: 1;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }
}
.nav-box{
    width: 100%;
    height: 40px;
    background-color: $navCol;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    a{
        flex-grow: 1;
        text-align: center;
        span{
            display: inline-block;
            height: 100%;
            line-height: 40px;
            font-size: 14px;
            color: rgb(155, 153, 153);
            padding: 0 15px;
        }
        &.active{
            span{
                color: #333;
                border-bottom: 1px solid rgb(119,149,141);
            }
        }
    }
}
.contain-box{
    max-width: $maxWidth;
    position: absolute;
    left: 0;
    top: 84px;
    width: 100%;
    height: (100%-20);
    overflow: scroll;
    overflow-x: hidden;
    background-color: $bodyCol;
    .cover{
        width: 100%;
        padding: 0 50px;
        box-sizing: border-box;
        margin-bottom: 20px;
        img{
            width: 100%;
            border-radius: 10px;
            box-shadow: 5px 5px 10px 0px rgb(184, 184, 184),
                        -5px 0px 10px 0px rgb(218, 216, 216);
        }
    }
    .provide{
        display: flex;
        justify-content: space-between;
        p{
            font-size: 12px;
            color: rgb(177, 176, 176);
            &.copyright{
                color: #e4e0e0;
            }
        }
    }
}
</style>